{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h1>学生信息列表</h1>

        
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>院系</th>
                    <th>班级</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for student in students %}
                <tr>
                    <td>{{ student.Sno }}</td>
                    <td>{{ student.Sname }}</td>
                    <td>{{ student.Ssex }}</td>
                    <td>{{ student.Sage }}</td>
                    <td>{{ student.Dno }}</td>
                    <td>{{ student.Sclass }}</td>
                    <td>{{ student.address }}</td>
                    <td>
                        <button class="btn btn-sm btn-warning edit-btn" 
                                data-student='{{ student.to_dict()|tojson }}'
                                data-bs-toggle="modal" 
                                data-bs-target="#editStudentModal">修改</button>
                        <form action="{{ url_for('delete_student', sno=student.Sno) }}" 
                              method="POST" 
                              style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-danger" 
                                    onclick="return confirm('确定要删除这条记录吗？')">删除</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
          <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addStudentModal">
            添加学生
        </button>
    </div>
</div>

<!-- 添加学生模态框 -->
<div class="modal fade" id="addStudentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加学生</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ url_for('add_student') }}" method="POST">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">学号</label>
                        <input type="text" class="form-control" name="Sno" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-control" name="Sname" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">性别</label>
                        <select class="form-select" name="Ssex" required>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">年龄</label>
                        <input type="number" class="form-control" name="Sage" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">院系</label>
                        <input type="text" class="form-control" name="Dno" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">班级</label>
                        <input type="text" class="form-control" name="Sclass">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">地址</label>
                        <input type="text" class="form-control" name="address">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑学生模态框 -->
<div class="modal fade" id="editStudentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑学生</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editForm" method="POST">
                <div class="modal-body">
                    <input type="hidden" name="Sno" id="edit-Sno">
                    <div class="mb-3">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-control" name="Sname" id="edit-Sname" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">性别</label>
                        <select class="form-select" name="Ssex" id="edit-Ssex" required>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">年龄</label>
                        <input type="number" class="form-control" name="Sage" id="edit-Sage" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">院系</label>
                        <input type="text" class="form-control" name="Dno" id="edit-Dno" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">班级</label>
                        <input type="text" class="form-control" name="Sclass" id="edit-Sclass">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">地址</label>
                        <input type="text" class="form-control" name="address" id="edit-address">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 处理编辑按钮点击
    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', function() {
            const student = JSON.parse(this.dataset.student);
            document.getElementById('edit-Sno').value = student.Sno;
            document.getElementById('edit-Sname').value = student.Sname;
            document.getElementById('edit-Ssex').value = student.Ssex;
            document.getElementById('edit-Sage').value = student.Sage;
            document.getElementById('edit-Dno').value = student.Dno;
            document.getElementById('edit-Sclass').value = student.Sclass;
            document.getElementById('edit-address').value = student.address;
            
            const form = document.getElementById('editForm');
            form.action = `/student/edit/${student.Sno}`;
        });
    });
});
</script>
{% endblock %}